<section class="flex items-center h-full p-16" [ngClass]="['bg' + contrast, 'text' + defaultInv]">
	<div class="container flex flex-col items-center justify-center px-5 mx-auto my-8">
		<div class="max-w-md text-center">
			<h2 class="mb-8 font-extrabold text-9xl" [ngClass]="['text' + plain]">
				<span class="sr-only">Error</span>
				404
			</h2>
			<p class="text-2xl font-semibold md:text-3xl">Sorry, we couldn't find this page.</p>
			<p class="mt-4 mb-8" [ngClass]="['text' + plainInv]">
				But dont worry, you can find plenty of other things on our homepage.
			</p>
			<a
				rel="noopener noreferrer"
				href="#"
				class="px-8 py-3 font-semibold rounded"
				[ngClass]="['bg' + primary, 'text' + contrast]"
			>
				Back to homepage
			</a>
		</div>
	</div>
</section>
